<template>
	<view>
		<view style="margin:30rpx">
			<!-- 微信选择文件 -->
			<!-- #ifdef MP-WEIXIN -->
			<button type="primary" @click="wxSelectFile()">选择文件(微信)</button>
			<!-- #endif -->
			<!-- 安卓选择文件 -->
			<!-- #ifdef APP-PLUS -->
			<button type="primary" @click="openFile()">选择文件(安卓)</button>
			<joFilesSelect v-model="openSelectFiles" @confirm="filesData"></joFilesSelect>
			<!-- #endif -->
			<view v-for="(item, index) in filesList" :key="index">
				<view class="filesBox" hover-class="opacityHover" hover-stay-time="50" @click="openPreviewFiles(item.path)">
					<view class="filesConBox">
						<image class="fileIcon" :src="`../../static/files-icon/${fileExtIcon(item.path)}.png`" mode=""></image>
						<view class="fileText">{{ item.name }}</view>
					</view>
					<image class="fileIconClose" src="../../static/files-icon/close.png" mode="" @click.stop="removeFile(index)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import joFilesSelect from '../../components/jo-files-select/jo-files-select.vue';
export default {
	components: {
		joFilesSelect
	},
	data() {
		return {
			openSelectFiles: false, //打开文件选择
			filesList: [
				{
					name: 'uniapp-猫.jpg',
					path: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
				},
				{
					name: 'uniapp-猫.png',
					path: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/66211cd0-4f31-11eb-bd01-97bc1429a9ff.png'
				},
				{
					name: 'uniapp-第一讲.mp4',
					path:
						'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
				},
				{
					name: 'uniapp-致爱丽丝.mp3',
					path: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
				},
				{
					name: '学位论文开题报告.doc',
					path: 'https://mba.seu.edu.cn/_upload/article/files/6d/09/887da7f9409e94ce25cf1f36ecf9/8335ca8b-3e93-4682-a399-223e5b1f67ba.doc'
				},
				{
					name: '抖音风.zip',
					path: 'https://ppt.1ppt.com/uploads/soft/2109/1-2109111K122.zip'
				}
			]
		};
	},
	methods: {
		// 安卓选择文件
		openFile() {
			console.log('安卓选择文件');
			let isApp = false;
			// #ifdef APP-PLUS
			isApp = true;
			if (plus.os.name.toLowerCase() != 'android') {
				uni.showModal({
					title: '提示',
					content: '仅支持Android平台',
					success: function(res) {}
				});
				return false;
			}
			// #endif
			if (!isApp) {
				uni.showModal({
					title: '提示',
					content: '仅支持Android平台',
					success: function(res) {}
				});
				return false;
			}
			this.openSelectFiles = true;
			console.log('this.openSelectFiles==', this.openSelectFiles);
		},
		filesData(data) {
			let that = this;
			console.log('选中文件列表data==', data);
			that.filesList = data;
			console.log('that.filesList==>', that.filesList);
		},
		// 微信选择文件
		wxSelectFile() {
			console.log('微信选择文件');
			let that = this;
			//#ifdef MP-WEIXIN
			uni.chooseMessageFile({
				type: 'file',
				success: function(source) {
					console.log('source==>', source);
					that.filesList = source.tempFiles;
					console.log('that.filesList==>', that.filesList);
				}
			});
			//#endif
		},
		removeFile(idx) {
			console.log('removeFile==>', idx);
			this.filesList.splice(idx, 1);
		},
		// 打开文件
		openPreviewFiles(filePath) {
			console.log('打开文件==》', filePath);

			let system = uni.getSystemInfoSync().platform;
			if (system == 'ios') {
				filePath = encodeURI(filePath);
			}
			uni.downloadFile({
				url: filePath,
				success: function(res) {
					var loaclfilePath = res.tempFilePath;
					uni.openDocument({
						showMenu: true,
						filePath: loaclfilePath,
						success: res => {
							console.log(res);
							console.log('打开文档成功');
							uni.showToast({
								title: '正在打开...',
								icon: 'none'
							});
						},
						fail: res1 => {
							uni.getImageInfo({
								src: loaclfilePath,
								success: imgInfo => {
									console.log('打开图片成功');
									uni.previewImage({
										current: loaclfilePath,
										urls: [loaclfilePath]
									});
								},
								fail: err => {
									console.log('非链接地址，尝试本地打开');
									uni.openDocument({
										showMenu: true,
										filePath: filePath,
										success: res => {
											console.log(res);
											console.log('打开文档成功');
											uni.showToast({
												title: '正在打开...',
												icon: 'none'
											});
										},
										fail: res1 => {
											uni.getImageInfo({
												src: filePath,
												success: imgInfo => {
													console.log('打开图片成功');
													uni.previewImage({
														current: filePath,
														urls: [filePath]
													});
												},
												fail: err => {
													console.log('不支持该格式');
													uni.showToast({
														title: '不支持该格式',
														icon: 'none'
													});
													return;
												}
											});
										}
									});
								}
							});
						}
					});
				}
			});
			//====
		},
		//判断呈现文件扩展属性
		fileExtIcon(path) {
			let extName = path.substr((~-path.lastIndexOf('.') >>> 0) + 2); //处理文件扩展名
			switch (extName) {
				case 'doc':
				case 'docx':
				case 'rtf':
					return 'word';
					break;
				case 'ppt':
				case 'pptx':
					return 'ppt';
					break;
				case 'xls':
				case 'xlsx':
					return 'excel';
					break;
				case 'png':
				case 'jpg':
				case 'jpeg':
					return 'img';
					break;
				case 'mp3':
				case 'm4a':
				case 'aac':
				case 'wav':
					return 'audio';
					break;
				case 'gif':
					return 'gif';
					break;
				case 'pdf':
					return 'pdf';
					break;
				case 'txt':
					return 'txt';
					break;
				case 'rar':
				case 'zip':
					return 'zip';
					break;
				case 'avi':
				case 'mp4':
					return 'video';
					break;
				default:
					return 'unfolder';
			}
		}
		//-----
	}
};
</script>

<style lang="scss">
button {
	margin-top: 30rpx;
	margin-bottom: 30rpx;
}

//文件扩展图标
.filesBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20rpx 0;
	.filesConBox {
		display: flex;
		justify-content: flex-start;
	}
	.fileIcon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
	}
	.fileIconClose {
		width: 30rpx;
		height: 30rpx;
	}
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
